/**
 * @file 登录页面
 * @author wangshaozhi(wangshaozhi@baidu.com)
 */

import {observer} from 'mobx-react';
import {useCallback} from 'react';
import {Button, Card, Form, Input, message} from 'antd';
import {useHistory} from 'react-router-dom';
import {useTitle} from 'react-use';
import request from 'axios';

// constants
import {LOGIN_URL} from '../../request/url';
import {encrypt} from '../../utils';

// icons
import {UserOutlined} from '@ant-design/icons';

// style
import cls from './index.module.scss';
import User from '../../model/user';

interface IProps {}

type TLoginProps = Pick<User, 'username' | 'password'>

export const Login: React.FC<IProps> = observer(() => {
    const history = useHistory();
    useTitle('系统登录');

    const onFinishHandler = useCallback(async (params: TLoginProps) => {
        const {username, password} = params;
        try {
            const res = await request({
                method: 'post',
                url: LOGIN_URL,
                data: {
                    username,
                    password: encrypt(password)
                }
            });
            if (res.data.data.code === 0) {
                const {
                    user,
                    token,
                    msg
                } = res.data.data;
                message.success(msg);
                localStorage.setItem('token', token);
                localStorage.setItem('user', JSON.stringify(user));
                history.push('/');
                return;
            }
            const tip = res.data.data.msg;
            message.error(tip);
        }
        catch(e) {

        }
    }, [history]);

    const onRegisterHandler = useCallback(() => {
        console.log('111')
        history.push('/register');
    }, [history]);

    return (
        <div className={cls.formWrapper}>
            <Card
                className={cls.card}
                title="简单博客管理系统登录"
            >
                <Form
                    labelAlign="left"
                    onFinish={onFinishHandler}
                >
                    <Form.Item
                        label="用户名"
                        labelCol={{flex: '0 0 80px'}}
                        name="username"
                        rules={[{required: true, message: '请输入用户名'}]}
                    >
                        <Input
                            type="text"
                            className={cls.input}
                            placeholder="请输入用户名"
                            suffix={<UserOutlined />}
                        />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        labelCol={{flex: '0 0 80px'}}
                        name="password"
                        rules={[{required: true, message: '请输入密码'}]}
                    >
                        <Input.Password
                            className={cls.input}
                            placeholder="请输入密码"
                        />
                    </Form.Item>
                    <div
                        className={cls.registerWrapper}
                        onClick={onRegisterHandler}
                    >
                        还没有账号？去注册
                    </div>
                    <Button
                        type="primary"
                        htmlType="submit"
                        shape="round"
                        className={cls.loginBtn}
                    >
                        登录
                    </Button>
                </Form>
            </Card>
        </div>
    );
});